<template>
  <div class="page-article" v-if="model">
    <div class="d-flex py-3 px-2 border-bottom ai-center">
      <div class="iconfont icon-fenxiang text-blue"></div>
      <strong class="flex-1 text-blue text-ellipsis pl-1">{{
        model.title
      }}</strong>
      <div class="text-grey">2021-10-29</div>
    </div>

    <!-- 内容 -->
    <div class="content px-3 fs-lg" v-html="model.body"></div>

    <!-- 相关资讯 -->
    <div class="px-3 border-top py-3">
      <div class="d-flex ai-center">
        <i class="iconfont icon-tabbar-icon-chanpin-selected text-grey1"></i>
        <strong class="text-blue fs-lg ml-1">相关资讯</strong>
      </div>

      <div class="py-3 fs-lg">
        <router-link
          class="py-1"
          tag="div"
          :to="`/articles/${item._id}`"
          v-for="item in model.related"
          :key="item._id"
        >
          {{ item.title }}
        </router-link>
      </div>
    </div>
  </div>
</template>

<script>
export default {
  props: {
    id: {required: true},
  },
  data() {
    return {
      model: null,
    };
  },
  // 点击链接后重新刷新组件
  // watch:{
  //   id: 'fetch',
  //   id(){
  //     this.fetch()
  //   }
  // },
  methods: {
    async fetch() {
      const res = await this.$http.get(`/articles/${this.id}`);
      this.model = res.data;
    },
  },
  created() {
    this.fetch();
  },
};
</script>

<style lang="scss">
.page-article {
  .content {
    img {
      max-width: 100%;
      height: auto;
    }
    iframe {
      width: 100%;
      height: auto;
    }
  }
}
</style>